<template>
	<view class="addOrEditNote-main">
		<view class="return-view" @click="returnPreviewPage">
			<uni-icons type="left" size="26"></uni-icons>
		</view>
		<view class="edit-or-add-content">
			<view class="imgs-or-video-list">
				<view class="picker-cover" :class="{ 'picker-vedio-cover': mediatypeValue === 1 }">
					<view class="picker-view">
						<uni-file-picker class="picker" v-model="selectedFiles" :limit="limitNum"
							:list-styles="listStyles" :file-mediatype="mediatype" @select="handleFileSelect"
							@delete="delFileHandler">
							<uni-icons type="plusempty" v-show="mediatypeValue===0" size="40"
								color="#d5d5d5"></uni-icons>
							<view class="select-video-view" v-show="mediatypeValue===1">
								<!-- <button>选择视频</button> -->
								<view class="video-select-area">
									{{selectVideoOrCoverText}}
								</view>
							</view>
						</uni-file-picker>
					</view>
					<view class="cover-picker" v-if="selectCoverShow">
						<uni-file-picker limit="1" @select="selectCover" @delete="delCover">
							<view class="video-select-area">
								选择封面
							</view>
						</uni-file-picker>
					</view>
				</view>


				<!-- 选择上传图片还是视频 -->
				<view class="select-imge-or-video">
					<uni-data-checkbox mode="tag" selectedColor="#66596b" v-model="mediatypeValue"
						:localdata="mediatypes" @change="selectMediatype"></uni-data-checkbox>
				</view>
			</view>
			<view class="dynamic-title">
				<!-- <uni-easyinput primaryColor="#66596b" v-model="title" placeholder="添加标题" trim="right"></uni-easyinput> -->
				<input v-model="title" placeholder="添加标题" trim="right"></input>
			</view>
			<view class="dynamic-content">
				<uni-easyinput id="editText" primaryColor="#ffffff" type="textarea" v-model="content" trim="right"
					placeholder="添加正文" :autoHeight="true" @input="handleContentInput" @focus="handleContentFocus">
				</uni-easyinput>
				<!-- <textarea auto-focus placeholder="添加正文" id="editText" v-model="content" @input="handleContentInput" @focus="handleContentFocus">
				</textarea > -->
			</view>
			<!-- 艾特的用户 -->
			<view class="aited-user-view" v-if="aitedUsers.length > 0">
				<view class="aited-user-per" v-for="item in aitedUsers" :key="item.userAid">
					{{item.userName}}&nbsp;
				</view>
			</view>

			<!-- 话题列表 -->
			<view class="topic-list-view" v-if="topicListShow">
				<view class="topic-per" :class="{'topic-per-selected': item.selected}" v-for="item in topicList"
					:key="item.topicAid" @click="selectTopic(item)">
					{{item.topicName}}
				</view>
			</view>

			<!-- 用户列表 -->
			<view class="topic-list-view" v-if="userListShow">
				<view class="topic-per" :class="{'topic-per-selected': item.selected}" v-for="item in userList"
					:key="item.userAid" @click="selectUser(item)">
					{{item.userName}}
				</view>
			</view>

			<view class="btn-topic-user">
				<view class="btn-topic" :class="{ 'btn-topic-selected': topicListShow }" @click="clickTopicBtn">
					#话题
				</view>
				<view class="btn-user" :class="{ 'btn-user-selected': userListShow }" @click="showUserList">
					@用户
				</view>
			</view>

			<!-- 分割线 -->
			<view class="divider-line"></view>

			<view class="select-note-type">
				<view class="select-note-type-title">
					类型
				</view>
				<!-- <radio-group @change="radioChange" class="radio-group-label">
					<view class="radio-view">
						<label class="radio-label" v-for="(item, index) in notestypes" :key="index">
							<view class="radio-item">
								<radio :value="item.value" :checked="index === noteTypeValue" color="#66596b" />
							</view>
							<view class="lebel-text">{{item.text}}</view>
						</label>
					</view>
				</radio-group> -->
				<view class="type-list">
					<view class="type-item" v-for="(item,index) in selectTypes" :key="index"
						@click="selectTypeFunc(item)">
						<view class="type-icon">
							<image :src="item.icon" mode="aspectFill" v-if="!item.isSelected"></image>
							<image :src="item.selectIcon" mode="aspectFill" v-else></image>
						</view>
						<view class="type-text" :class="{ 'select-text': item.isSelected }">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>

			<!-- 分割线 -->
			<view class="divider-line"></view>

			<!-- 选择境内游还是境外游 -->
			<view class="travel-type">
				<view class="travel-type-text">
					范围
				</view>
				<view class="travel-type-radio-group">
					<!-- <radio-group name="noteField" @change="noteFieldChange">
						<view class="radio-item-view">
							<label class="first-radio-label">
								<radio value="1" :checked="!noteFieldCurrent" color="#66596b" /><text
									class="travel-type-value">境内</text>
							</label>
							<label>
								<radio value="2" :checked="noteFieldCurrent" color="#66596b" /><text
									class="travel-type-value">境外</text>
							</label>
						</view>
					</radio-group> -->
					<view class="jing-nei-jing-wai">
						<view class="jing-nei" @click="noteFieldChange">
							<view class="jing-nei-icon">
								<image src="@/static/icons/edit-note/inside-country.png" mode="aspectFill"
									v-if="noteFieldCurrent"></image>
								<image src="@/static/icons/edit-note/inside-country-select.png" mode="aspectFill"
									v-else></image>
							</view>
							<view class="jing-nei-text" :class="{'text-area-selected': !noteFieldCurrent}">
								境内
							</view>
						</view>
						<view class="jing-nei" @click="noteFieldChange">
							<view class="jing-nei-icon">
								<image src="@/static/icons/edit-note/out-country.png" mode="aspectFill"
									v-if="!noteFieldCurrent"></image>
								<image src="@/static/icons/edit-note/out-country-select.png" mode="aspectFill" v-else>
								</image>
							</view>
							<view class="jing-nei-text" :class="{'text-area-selected': noteFieldCurrent}">
								境外
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 分割线 -->
			<view class="divider-line"></view>

			<!-- 标记地点 -->
			<view class="address-view">
				<view class="icon-address-text">
					<view class="icon-address">
						<uni-icons type="location" size="22"></uni-icons>
					</view>
					<view class="address-text">
						<input type="text" v-model="addressText" class="address-text-input" />
					</view>
				</view>
				<view class="open-select-address-icon" @click="selectAddress">
					<uni-icons type="right" size="20" color="#c3c3c3"></uni-icons>
				</view>
			</view>

			<!-- 分割线 -->
			<view class="divider-line"></view>

			<!-- 可见范围 -->
			<view class="see-field">
				<view class="see-field-icon-text">
					<view class="see-field-icon-view">
						<image src="@/static/icons/open-lock.png" mode="aspectFit" class="see-field-image"></image>
					</view>
					<view class="see-field-text">
						{{seeFieldText}}
					</view>
				</view>
				<view class="see-field-open-icon" @click="popupSeeFieldList">
					<uni-icons type="right" size="20" color="#c3c3c3"></uni-icons>
				</view>
			</view>
		</view>

		<!-- 存草稿和发布 -->
		<view class="save-and-release">
			<view class="save-draft-view">
				<view class="save-draft-icon">
					<image src="@/static/icons/save-draft.png" mode="aspectFit" class="save-draft-icon-image"></image>
				</view>
				<view class="save-draft-text" @click="saveDraft">
					存草稿
				</view>
			</view>
			<view class="release-btn-view" @click="releaseNote">
				<button type="default" class="release-btn">发布笔记</button>
			</view>
		</view>


		<!-- 可见氛围选择弹出框 -->
		<uni-popup ref="seeFieldPopup" type="bottom">
			<view class="seeField-main">
				<view class="see-field-per" v-for="item in seeFieldList" :key="item.id" @click="selectField(item)">
					{{item.text}}
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import DomVideoPlayer from '@/components/DomVideoPlayer/DomVideoPlayer.vue';
	import {
		uploadOss,
		deleteFile
	} from '@/common/upload-oss/upload.js';
	import {
		client
	} from '@/request/alioss.js';
	import {
		saveDraft,
		getTopicAndUsers,
		releaseNote
	} from '@/request/upload.js'
	import {
		dateToString
	} from '../../../../common/util.js';
	import mitter from '@/common/mitt/eventBus.js';
	export default {
		components: {
			DomVideoPlayer
		},
		data() {
			return {
				selectTypes: [{
						title: '露营',
						icon: '../../../../static/icons/edit-note/Camping-Tent.png',
						selectIcon: '../../../../static/icons/edit-note/Camping-Tent-selected.png',
						isSelected: true
					},
					{
						title: '美食',
						icon: '../../../../static/icons/edit-note/food.png',
						selectIcon: '../../../../static/icons/edit-note/food-select.png',
						isSelected: false
					},
					{
						title: '民宿',
						icon: '../../../../static/icons/edit-note/homestay.png',
						selectIcon: '../../../../static/icons/edit-note/homestay-select.png',
						isSelected: false
					},
					{
						title: '活动',
						icon: '../../../../static/icons/edit-note/activity.png',
						selectIcon: '../../../../static/icons/edit-note/activity-select.png',
						isSelected: false
					}
				],
				coverUrl: '',
				selectCoverShow: false,
				selectVideoOrCoverText: '选择视频',
				notestypes: [{
						value: '0',
						text: "露营"
					},
					{
						value: '1',
						text: "美食"
					},
					{
						value: '2',
						text: "民宿"
					},
					{
						value: '3',
						text: "活动"
					},
				], // 笔记类型数组
				noteFieldCurrent: false, // 当前选择境内游还是境外游
				noteTypeValue: 0, // 笔记类型值
				addressText: '标记地点', // 地址
				addressLocation: '', // 地点的经纬度
				isDraft: false, // 是否是草稿
				isRelease: false, // 是否发布
				aitedUsers: [], // 被@的用户名列表
				userList: [{
						userAid: 1,
						userName: '@小野',
						selected: false,
					},
					{
						userAid: 2,
						userName: '@南风知我意',
						selected: false,
					},
					{
						userAid: 3,
						userName: '@小猫爱吃鱼',
						selected: false,
					},
					{
						userAid: 4,
						userName: '@我爱吃西红柿',
						selected: false,
					},
					{
						userAid: 5,
						userName: '@四眼仔',
						selected: false,
					},
				], // 用户列表
				userListShow: false, // 用户列表是否显示
				topicListShow: false, // 话题列表是否显示
				selectedFiles: [], // 存储uni-file-picker选择的文件列表
				sendFiles: [], // 保存草稿或者发布的时候，发送给后端存储的文件数组
				seeFieldText: '公开可见', // 可见范围
				title: '', // 笔记的标题
				content: '', // 笔记的内容
				mediatypes: [{
					text: '图片',
					value: 0
				}, {
					text: '视频',
					value: 1
				}],
				mediatypeValue: 0, // 0代表图片；1代表视频
				mediatype: 'image', // 上传的文件类型是图片还是视频（图片：image；视频：video）
				limitNum: 9, // 最多上传的数量
				listStyles: {
					// 是否显示边框
					border: true,
					// 是否显示分隔线
					dividline: true,
					// 线条样式
					borderStyle: {
						width: 1,
						color: '#66596b',
						radius: 2
					}
				},
				topicList: [{
						topicAid: 1,
						topicName: '#野餐好地方',
						selected: false,
					},
					{
						topicAid: 2,
						topicName: '#带娃出去野',
						selected: false,
					},
					{
						topicAid: 3,
						topicName: '#美丽时装周',
						selected: false,
					},
					{
						topicAid: 4,
						topicName: '#二向箔',
						selected: false,
					},
					{
						topicAid: 5,
						topicName: '#情绪价值',
						selected: false,
					},
					{
						topicAid: 6,
						topicName: '#熬夜',
						selected: false,
					},
				],
				seeFieldList: [{
						id: 1,
						text: '公开可见',
					},
					{
						id: 2,
						text: '互关可见',
					},
					{
						id: 3,
						text: '仅自己可见',
					}
				],
			};
		},

		onLoad() {
			// 获取话题列表和用户列表
			this.getTopicAndUsers();

			const that = this;
			mitter.on('selectedAddress', (data) => {
				if (data) {
					console.log("选择的地址：", data);
					that.addressText = data.name;
					that.addressLocation = data.location;
				}
			});

		},


		watch: {
			content(newContent, oldContent) {
				this.handleContentInput(newContent);
			}
		},

		methods: {

			// 获取话题列表和用户列表
			getTopicAndUsers() {
				getTopicAndUsers().then(res => {
					// console.log(res);
					if (res.data.code === 10000 && res.status === 200) {
						this.topicList = res.data.data.topicList;
						this.userList = res.data.data.userList;
					}
				})
			},

			// 返回上一页
			returnPreviewPage() {
				mitter.emit("closeDraft", true);
				uni.switchTab({
					url: '/pages/tabBar/component/component'
				})
			},

			// 选择图片还是视频
			async selectMediatype(e) {
				if (e.detail.value === 0) {
					// 选择的图片
					this.limitNum = 9;
					this.mediatypeValue = 0;
					this.mediatype = 'image';
					this.selectCoverShow = false;
					if (this.selectedFiles.length > 0) {
						// 删除之前的文件
						await Promise.all(this.selectedFiles.map(async (item) => {
							if (item.fileType === 'video') {
								uni.showToast({
									title: '只能上传图片！'
								});
								try {
									const fileName = this.getFileName(item);
									const ossClient = await client();
									await ossClient.delete(fileName);
								} catch (err) {
									console.error('文件删除失败：', err);
								}
							}
						}));
						this.selectedFiles = this.selectedFiles.filter(item => item.fileType !== 'video');
						this.sendFiles = [];
					}
				} else {
					// 选择的视频
					this.limitNum = 1;
					this.mediatypeValue = 1;
					this.mediatype = 'video';
					this.selectCoverShow = true;
					if (this.selectedFiles.length > 0) {
						// 删除之前的文件
						await Promise.all(this.selectedFiles.map(async (item) => {
							if (item.fileType === 'image') {
								uni.showToast({
									title: '只能上传视频！'
								});
								try {
									const fileName = this.getFileName(item);
									const ossClient = await client();
									await ossClient.delete(fileName);
								} catch (err) {
									console.error('文件删除失败：', err);
								}
							}
						}));
						this.selectedFiles = this.selectedFiles.filter(item => item.fileType !== 'image');
						this.sendFiles = [];
					}
				}
			},

			// 获取文件名称的辅助函数
			getFileName(item) {
				let fileName = '';
				if (item.fileType === 'image') {
					fileName = '/app/dynamic/image/user/' + uni.getStorageSync('userName') + dateToString(new Date()) +
						encodeURIComponent(item.name);
				} else if (item.fileType === 'video') {
					fileName = '/app/dynamic/video/user/' + uni.getStorageSync('userName') + dateToString(new Date()) +
						encodeURIComponent(item.name);
				}
				return fileName;
			},


			// 选择文件(一个一个上传)
			async handleFileSelect(e) {
				console.log("e ：", e);
				const that = this;
				if (that.mediatypeValue === 0) {
					// 如果文件=九张图提示一下
					if (e.tempFiles && e.tempFiles.length === 9) {
						uni.showToast({
							title: '图片最多只能上传 9 张',
							icon: 'none',
							duration: 1000
						});
					}
					const uploadPromises = e.tempFiles.map(async (image, index) => {
						console.log("图片： ", image);

						// #ifndef APP-PLUS
						const fileName = '/app/dynamic/image/user/' + uni.getStorageSync('userName') +
							dateToString(new Date()) + image.name;
						client().then(async (ossClient) => {
							try {
								ossClient.multipartUpload(fileName, image.file)
							} catch (err) {
								console.error("上传错误：", err);
							}
						});
						that.selectedFiles.push({
							fileType: that.mediatype,
							fileUrl: 'https://jyapp-fzg.oss-cn-hangzhou.aliyuncs.com' + fileName,
							isUpload: true,
						});
						that.sendFiles.push({
							fileType: that.mediatype,
							url: 'https://jyapp-fzg.oss-cn-hangzhou.aliyuncs.com' + fileName,
						});
						// #endif
						// #ifdef APP-PLUS
						const filePathForce = 'app/dynamic/image/user/';
						const filePath = image.url;
						const uploadRes = await uploadOss({
							filePathFore: filePathForce,
							filePath: filePath
						});
						console.log("上传成功：", uploadRes);
						that.selectedFiles.push({
							fileType: that.mediatype,
							fileUrl: uploadRes,
							isUpload: true,
						});
						that.sendFiles.push({
							fileType: that.mediatype,
							url: uploadRes,
						});
						// #endif
					});
					Promise.all(uploadPromises).then((results) => {
						results.forEach((result, index) => {
							this.selectedFiles[index].isUpload = true; // 表示上传成功
							const image = e.tempFiles[index];
						});
					}).catch((err) => {
						console.error('部分图片上传失败：', err);
						if (err.index !== undefined) {
							console.log(`第 ${err.index + 1} 张图片上传失败：`, err.err);
						}
						// 可以在这里根据具体需求，进一步分析哪些图片上传失败等情况，给用户更准确的提示
						uni.showToast({
							title: '图片上传失败，请稍后重试',
							icon: 'none',
							duration: 2000
						});
					});
				} else {
					// #ifndef APP-PLUS
					const fileName = '/app/dynamic/video/user/' + uni.getStorageSync('userName') +
						dateToString(new Date()) + e.tempFiles[0].name;
					const uploadPromise = client().then(async (ossClient) => {
						that.selectVideoOrCoverText = "选择成功"
						return ossClient.multipartUpload(fileName, e.tempFilePaths[0])
					}).catch(err => {
						console.error("上传失败");
						console.error(err);
						uni.showToast({
							title: '上传失败！,请稍后再试...',
							icon: 'none'
						})
					})
					this.selectedFiles.push({
						fileType: this.mediatype,
						fileUrl: 'https://jyapp-fzg.oss-cn-hangzhou.aliyuncs.com' + fileName,
						isUpload: false,
					});
					this.sendFiles.push({
						fileType: this.mediatype,
						url: 'https://jyapp-fzg.oss-cn-hangzhou.aliyuncs.com' + fileName,
					});
					// #endif
					// #ifdef APP-PLUS
					const filePathForce = 'app/dynamic/video/user/';
					console.log("filePathForce: ", filePathForce);
					const filePath = e.tempFilePaths[0];
					console.log("filePath: ", filePath);
					// 重置签名，让它重新从后端返回STS
					const uploadRes = await uploadOss({
						filePathFore: filePathForce,
						filePath: filePath
					});
					that.selectVideoOrCoverText = "选择成功"
					console.log("上传成功：", uploadRes);
					that.selectedFiles.push({
						fileType: that.mediatype,
						fileUrl: uploadRes,
						isUpload: true,
					});
					that.sendFiles.push({
						fileType: that.mediatype,
						url: uploadRes,
					});
					// #endif
				}
			},


			// 点击删除图标删除上传的图片或者视频
			async delFileHandler(e) {
				console.log(e);
				let fileName = '';
				const that = this;
				if (this.mediatypeValue === 0) {

					// #ifndef APP-PLUS
					fileName = '/app/dynamic/image/user/' + uni.getStorageSync('userName') + dateToString(
						new Date()) + encodeURIComponent(e.tempFile.name);

					// #endif
					// #ifdef APP-PLUS
					console.log("APP端删除");
					console.log(that.sendFiles);
					that.sendFiles.forEach(item => {
						if (item.url.includes(e.tempFile.name.substring(0, e.tempFile.name.lastIndexOf(
								'.')))) {
							console.log("找到了");
							fileName = item.url.substring(item.url.indexOf(
								"https://jyapp-fzg.oss-cn-hangzhou.aliyuncs.com"));
						}
					})
					console.log(fileName);
					// #endif
				} else {
					fileName = '/app/dynamic/video/user/' + uni.getStorageSync('userName') + dateToString(
						new Date()) + encodeURIComponent(e.tempFile.name);
				}

				// #ifndef APP-PLUS
				client().then((ossClient) => {
					return ossClient.delete(fileName);
				}).then(result => {
					this.selectedFiles = this.selectedFiles.filter(file => file.name !== e.tempFile.name);
					console.log('文件删除成功：', result);
					this.sendFiles = this.sendFiles.filter(item => !item.url.includes(e.tempFile.name));
					// console.log(this.sendFiles);
				}).catch(err => {
					console.error('文件删除失败：', err);
				});
				// #endif
				// #ifdef APP-PLUS
				await deleteFile(fileName);
				// #endif

			},

			// 点击话题，把话题内容放到编辑文本框中
			selectTopic(item) {
				if (item.selected && this.content.includes(item.topicName)) {
					// 去掉选中样式，编辑正文里面去掉该话题
					this.content = this.content.replace(item.topicName, '');
					this.topicList[item.topicAid - 1].selected = false;
				} else {
					let newContent = this.content;
					if (newContent === '') {
						newContent = item.topicName;
					} else {
						// 使用正则表达式来处理第一个#号前的空格以及其他#号前后的空格情况
						const firstHashtagIndex = newContent.indexOf('#');
						if (firstHashtagIndex === 0) {
							// 如果第一个字符就是#，直接添加话题
							newContent += (newContent.endsWith(' ') ? '' : '') + item.topicName;
						} else {
							const firstPart = newContent.substring(0, firstHashtagIndex).trim();
							const remainingPart = newContent.substring(firstHashtagIndex);
							newContent = firstPart + '' + remainingPart.replace(/#/g, '# ').trim();
							newContent += (newContent.endsWith(' ') ? '' : '') + item.topicName;
						}
					}
					this.content = newContent;
					this.topicList[item.topicAid - 1].selected = true;
				}
			},

			// 选择用户
			selectUser(item) {
				item.selected = !item.selected;
				const index = this.aitedUsers.findIndex(u => u.userAid === item.userAid);
				if (item.selected) {
					if (index === -1) {
						// 如果当前用户不在已选用户列表中，则添加进去
						this.aitedUsers.push(item);
					}
				} else {
					if (index !== -1) {
						// 如果当前用户已在已选用户列表中，且现在取消选中了，就将其从列表中移除
						this.aitedUsers.splice(index, 1);
					}
				}
			},

			// 监听正文输入框里面的内容变化
			handleContentInput() {
				const content = this.content;
				// console.log(content);
				this.topicList.forEach((topic) => {
					const topicName = topic.topicName;
					const isFullMatch = content.includes(topicName) && content.indexOf(topicName) === content
						.lastIndexOf(topicName);
					const isPartialMatch = content.includes(topicName) && content.indexOf(topicName) !== content
						.lastIndexOf(topicName);
					if (isFullMatch) {
						topic.selected = true;
					} else if (isPartialMatch) {
						topic.selected = false;
					} else {
						topic.selected = false;
					}
				});
			},

			// 点击话题按钮
			clickTopicBtn() {
				this.topicListShow = !this.topicListShow;
				this.userListShow = false;
			},

			// 显示用户列表
			showUserList() {
				this.userListShow = !this.userListShow;
				this.topicListShow = false;
			},

			// 处理编辑框获取焦点时的逻辑（判断第一行是否有话题，决定是否添加空格）
			handleContentFocus() {
				const lines = this.content.split('\n');
				const firstLine = lines[0];
				if (firstLine && firstLine.trim().startsWith('#')) {
					// 如果第一行存在内容且以#开头（认为是话题），则在开头添加空格
					this.content = this.content + '  ';
				}
			},

			// 地址选择
			selectAddress() {
				uni.navigateTo({
					url: '/pages/common-compoent/MapContainer'
				})
			},

			// 点击图标，弹出可见范围列表
			popupSeeFieldList() {
				this.$refs.seeFieldPopup.open()
			},

			// 选择可见范围
			selectField(item) {
				// console.log(item);
				this.seeFieldText = item.text;
				this.$refs.seeFieldPopup.close();
			},

			// 存草稿(内容都可以为空)
			saveDraft() {
				let aiteUsers = []
				this.aitedUsers.forEach(item => {
					if (item.selected) {
						aiteUsers.push(item)
					}
				})
				let topicList = [];
				this.topicList.forEach(item => {
					if (item.selected) {
						topicList.push(item)
					}
				})
				for (var i = 0; i < this.selectTypes.length; i++) {
					if (this.selectTypes[i].isSelected) {
						this.noteTypeValue = i;
					}
				}
				if (this.mediatypeValue === 1 && this.mediatype === 'video') {
					this.sendFiles[0].cover = this.coverUrl;
				}
				const data = {
					mediaUrls: this.sendFiles,
					title: this.title,
					content: this.content,
					topicList: topicList,
					aiteUsers: aiteUsers,
					laberAddress: this.addressText,
					location: this.addressLocation,
					seeField: this.seeFieldText,
					noteTypeValue: this.noteTypeValue,
					travelFieldValue: this.noteFieldCurrent ? '境外游' : '境内游'
				}
				console.log(data);
				saveDraft(data).then(res => {
					// console.log(res);
					if (res.data.code === 10000) {
						uni.showToast({
							title: '保存成功',
							duration: 1000
						})
						setTimeout(() => {
							this.returnPreviewPage();
						}, 1000)
					}
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: '保存失败，请稍后再试...',
						icon: 'error',
						duration: 2000
					})
					setTimeout(() => {
						this.returnPreviewPage();
					}, 1000)
				})
			},

			// radioChange(e) {
			// 	// console.log(e);
			// 	this.noteTypeValue = e.detail.value;
			// 	// console.log(this.noteTypeValue);
			// },

			noteFieldChange() {
				this.noteFieldCurrent = !this.noteFieldCurrent;
			},

			// 发布笔记
			releaseNote() {
				// console.log(this.selectedFiles);
				if (this.selectedFiles.length > 0) {
					if (this.title.trim() === '') {
						uni.showToast({
							title: '请填写标题',
							icon: 'none'
						})
						return;
					} else {
						let aiteUsers = []
						this.aitedUsers.forEach(item => {
							if (item.selected) {
								aiteUsers.push(item)
							}
						})
						let topicList = [];
						this.topicList.forEach(item => {
							if (item.selected) {
								topicList.push(item)
							}
						})
						for (var i = 0; i < this.selectTypes.length; i++) {
							if (this.selectTypes[i].isSelected) {
								this.noteTypeValue = i;
							}
						}
						if (this.mediatypeValue === 1 && this.mediatype === 'video') {
							if (this.coverUrl !== '') {
								this.sendFiles[0].cover = this.coverUrl;
							} else {
								uni.showToast({
									title: '请选择视频封面',
									icon: 'none'
								})
								return;
							}
						}

						const data = {
							mediaUrls: this.sendFiles,
							title: this.title,
							content: this.content,
							topicList: topicList,
							aiteUsers: aiteUsers,
							laberAddress: this.addressText,
							location: this.addressLocation,
							seeField: this.seeFieldText,
							noteTypeValue: this.noteTypeValue,
							travelFieldValue: this.noteFieldCurrent ? '境外游' : '境内游'
						}
						// console.log(data);
						releaseNote(data).then(res => {
							console.log(res);
							if (res.data.code === 10000) {
								uni.showToast({
									title: '发布成功',
									duration: 1000
								})
								// 通知发现页面更新
								mitter.emit("releaseNoteSuccess",true);
								setTimeout(() => {
									this.returnPreviewPage();
								}, 1000)
							}

						}).catch(err => {
							console.log(err);
							uni.showToast({
								title: '系统异常，请稍后再试...',
								icon: 'none',
								duration: 1500,
							})
							this.returnPreviewPage();
						})
					}
				} else {
					uni.showToast({
						title: '请上传图片或视频',
						icon: 'none'
					})
					return;
				}
			},

			// 上传封面
			async selectCover(e) {
				const that = this;
				// console.log(e);
				// #ifndef APP-PLUS
				const fileName = '/app/dynamic/video/user/cover/' + uni.getStorageSync('userName') +
					dateToString(new Date()) + encodeURIComponent(e.tempFiles[0].name);
				client().then((ossClient) => {
					that.coverUrl = "https://jyapp-fzg.oss-cn-hangzhou.aliyuncs.com" + fileName;
					return ossClient.multipartUpload(fileName, e.tempFiles[0].file);
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: "上传失败！请稍后再试...",
						icon: 'none'
					})
				});
				// #endif
				// #ifdef APP-PLUS
				console.log("选择封面：", e);
				const filePath = e.tempFiles[0].url;
				const filePathForce = 'app/dynamic/video/cover/';
				console.log("文件路径：", filePath);
				const userBg = await uploadOss({
					filePathFore: filePathForce,
					filePath: filePath
				});
				that.coverUrl = userBg;
				console.log("文件URL：", userBg);
				// #endif
			},

			delCover() {
				const fileName = this.coverUrl.replace("https://jyapp-fzg.oss-cn-hangzhou.aliyuncs.com", "");
				client().then((ossClient) => {
					return ossClient.delete(fileName);
				}).then(result => {
					this.coverUrl = "";
					console.log('文件删除成功：', result);
					// console.log(this.selectedFiles);
				}).catch(err => {
					console.error('文件删除失败：', err);
				});
			},

			// 选择类型
			selectTypeFunc(item) {
				console.log(item);
				this.selectTypes.forEach(obj => {
					obj.isSelected = false;
				})
				item.isSelected = true;
			},
		},
	}
</script>

<style lang="scss" scoped>
	.addOrEditNote-main {
		padding: 30rpx;
		padding-top: 60rpx;
		height: 90vh;
		overflow-y: scroll;
		background-color: #fff;
	}

	.edit-or-add-content {
		margin-top: 60rpx;

		.imgs-or-video-list {

			// .picker-vedio-cover {
			// 	display: flex;

			// 	.cover-picker{
			// 		// width: 200rpx;
			// 		margin-left: 50px;
			// 		uni-file-picker {
			// 			// width: 200rpx;
			// 			// height: 200rpx;

			// 			.video-select-area {
			// 				width: 200rpx;
			// 				height: 200rpx;
			// 				color: #9e9e9e;
			// 				border: 2px dashed #9e9e9e;
			// 				display: flex;
			// 				justify-content: center;
			// 				align-items: center;
			// 			}
			// 		}
			// 	}
			// }

			.picker-cover {
				position: relative;

				.picker-view {

					// width: 40%;
					.picker {
						min-height: 230rpx;

						// background-color: #555555;
						// width: 45%;
						.select-video-view {
							height: 220rpx;
							display: flex;
							align-items: center;

							// background-color: #85a6a1;
							button {
								background-color: #66596b;
								color: #fff;
								font-size: 26rpx;
							}
						}
					}
				}

				.cover-picker {
					width: 100%;
					// height: 220px;
					position: absolute;
					top: 0;
					left: 150px;

					uni-file-picker {
						margin-left: 200px;

						.video-select-area {
							width: 200rpx;
							height: 200rpx;
							color: #9e9e9e;
							border: 2px dashed #9e9e9e;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
				}

			}
		}
	}

	.select-imge-or-video {
		margin-top: 30rpx;
		// background-color: #555555;
	}

	.dynamic-title {
		height: 40px;
		border: solid 1px #e7e7e7;
		margin-top: 30rpx;
		// background-color: #555555;
		border-radius: 20px;
		/* 水平偏移5px，垂直偏移5px，模糊半径3px，阴影颜色为半透明黑色 */
		box-shadow: 5px 4px 3px rgba(225, 225, 225, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		
		input{
			width: 90%;
		}
	}

	.dynamic-content {
		// height: 200px;
		min-height: 40px;
		border: solid 1px #e7e7e7;
		margin-top: 30rpx;
		// background-color: #555555;
		border-radius: 20px;
		/* 水平偏移5px，垂直偏移5px，模糊半径3px，阴影颜色为半透明黑色 */
		box-shadow: 5px 4px 3px rgba(225, 225, 225, 0.5);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		textarea {
			width: 90%;
		}
	}

	.aited-user-view {
		margin-top: 30rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		.aited-user-per {
			color: #626262;
		}
	}

	.topic-list-view {
		width: 100%;
		margin-top: 50rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;

		// background-color: #9defea;
		&::-webkit-scrollbar {
			display: none;
		}

		.topic-per {
			font-size: 24rpx;
			color: #868686;
			margin-right: 30rpx;
			background-color: #efefef;
			padding: 15rpx;
			border-radius: 25rpx;
			white-space: nowrap;
		}

		.topic-per-selected {
			font-size: 24rpx;
			color: #fff;
			margin-right: 30rpx;
			background-color: #66596b;
			padding: 15rpx;
			border-radius: 25rpx;
			white-space: nowrap;
		}
	}

	.btn-topic-user {
		margin-top: 30rpx;
		color: #555555;
		display: flex;
		flex-direction: row;

		.btn-topic {
			background-color: #efefef;
			padding: 10rpx;
			border-radius: 30rpx;
			font-size: 24rpx;
			margin-right: 30rpx;
			width: 90rpx;
			text-align: center;
		}

		.btn-topic-selected {
			background-color: #66596b;
			padding: 10rpx;
			border-radius: 30rpx;
			font-size: 24rpx;
			margin-right: 30rpx;
			width: 90rpx;
			text-align: center;
			color: #fff;
		}





		.btn-user {
			background-color: #efefef;
			padding: 10rpx;
			border-radius: 30rpx;
			font-size: 24rpx;
			margin-right: 30rpx;
			width: 90rpx;
			text-align: center;
		}

		.btn-user-selected {
			background-color: #66596b;
			padding: 10rpx;
			border-radius: 30rpx;
			font-size: 24rpx;
			margin-right: 30rpx;
			width: 90rpx;
			text-align: center;
			color: #fff;
		}
	}

	.select-note-type {
		margin-top: 30rpx;

		.type-list {
			width: 90%;
			margin-left: auto;
			margin-right: auto;
			margin-top: 20px;
			display: flex;
			justify-content: space-between;

			.type-item:nth-child(1) {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.type-icon {
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 55rpx;
						height: 40rpx;
					}
				}

				.type-text {
					font-size: 14px;
				}

				.select-text {
					font-size: 15px;
					color: #66596b;
				}
			}


			.type-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.type-icon {
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}

				.type-text {
					font-size: 14px;
				}

				.select-text {
					font-size: 15px;
					color: #66596b;
				}
			}
		}

		.select-note-type-title {
			font-size: 28rpx;
			color: #66596b;
			margin-left: 20rpx;
		}

		.radio-group-label {
			margin-top: 30rpx;

			.radio-view {
				display: flex;
				flex-direction: row;
				justify-content: space-around;

				// background-color: #00b0aa;
				.radio-item {
					// background-color: #01c6c1;	
				}

				.lebel-text {
					font-size: 26rpx;
					// background-color: #caf1ff;
				}
			}
		}
	}

	.travel-type {
		margin-top: 30rpx;

		.travel-type-text {
			font-size: 28rpx;
			color: #66596b;
			margin-left: 20rpx;
		}

		.travel-type-radio-group {
			margin-top: 25rpx;

			// .radio-item-view {
			// 	display: flex;
			// 	margin-left: 48rpx;

			// 	.travel-type-value {
			// 		font-size: 28rpx;
			// 	}

			// 	.first-radio-label {
			// 		margin-right: 80rpx;
			// 	}
			// }

			.jing-nei-jing-wai {
				display: flex;
				margin-left: 16rpx;

				.jing-nei {
					margin-right: 60px;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.jing-nei-icon {
						image {
							width: 30px;
							height: 30px;
						}
					}

					.text-area-selected {
						color: #66596b;
					}
				}
			}
		}
	}

	.address-view {
		width: 100%;
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		.icon-address-text {
			width: 88%;
			display: flex;
			flex-direction: row;

			.address-text {
				font-size: 28rpx;
				margin-left: 10rpx;
				width: 100%;
			}
		}

		.open-select-address-icon {
			// background-color: #00b0aa;
			width: 50rpx;
			text-align: right;
		}
	}

	.divider-line {
		margin-top: 40rpx;
		width: 100%;
		border-top: solid;
		border-color: #efefef;
		border-top-width: 1rpx;
	}

	.see-field {
		margin-top: 30rpx;
		// margin-bottom: 300rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 100rpx;

		.see-field-icon-text {
			display: flex;
			flex-direction: row;

			.see-field-icon-view {
				margin-left: 10rpx;

				.see-field-image {
					width: 35rpx;
					height: 35rpx;
					margin-right: 10rpx;
				}
			}

			.see-field-text {
				font-size: 30rpx;
			}
		}

		.see-field-open-icon {
			width: 50rpx;
			text-align: right;
			// background-color: #00b0aa;
		}
	}

	.save-and-release {
		// z-index: 100;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		// height: 100rpx;
		background-color: #f8f8f8;
		padding: 30rpx;
		display: flex;
		flex-direction: row;

		// justify-content: space-around;
		.save-draft-view {
			width: 30%;
			// background-color: #01c6c1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.save-draft-icon {

				.save-draft-icon-image {
					width: 35rpx;
					height: 35rpx;
				}
			}

			.save-draft-text {
				font-size: 20rpx;
				letter-spacing: 2rpx;
				color: #7a7a7a;
			}
		}

		.release-btn-view {
			width: 60%;
			// background-color: #cae7ff;
			.release-btn {
				width: 50%;
				height: 40px;
				// letter-spacing: 10rpx;
				background-color: #66596b;
				color: #fff;
				border-radius: 40rpx;
				font-size: 14px;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 2px 2px 5px rgba(25, 25, 25, 0.5);
			}
		}
	}

	.topiclist-view {
		width: 100%;

	}

	.seeField-main {
		background-color: #fff;
		height: 30vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}

	.video-select-area {
		width: 200rpx;
		height: 200rpx;
		color: #9e9e9e;
		border: 2px dashed #9e9e9e;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>